<script setup lang="ts">
import { computed, ref } from 'vue'
import chart from '@/components/common/chart.vue'


interface chartData {
  name: string,
  data: number[],
}

const props = defineProps<{
  data:  chartData[],
  xData: string[],
  height?: string,
  width?: string,
  color?: string[]
}>()

const width = props.width || '100%';
const height = props.height || '100%';
const color = props.color || [
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'rgba(255, 53, 53, 1)' // 0% 处的颜色
    }, {
        offset: 1, color: 'rgba(255, 53, 53, 0.1)' // 100% 处的颜色
    }],
    global: false // 缺省为 false
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'rgba(254, 133, 0, 1)' // 0% 处的颜色
    }, {
        offset: 1, color: 'rgba(254, 133, 0, 0.1)' // 100% 处的颜色
    }],
    global: false // 缺省为 false
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'rgba(255, 191, 1, 1)' // 0% 处的颜色
    }, {
        offset: 1, color: 'rgba(255, 191, 1, 0.1)' // 100% 处的颜色
    }],
    global: false // 缺省为 false
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'rgba(34, 184, 254, 1)' // 0% 处的颜色
    }, {
        offset: 1, color: 'rgba(34, 184, 254, 0.1)' // 100% 处的颜色
    }],
    global: false // 缺省为 false
  }
]

const options = computed(() => {
  let series: any[] = [];
  props.data.forEach((item, index) => {
    series.push({
      name: item.name,
      type: 'bar',
      itemStyle: {
        borderRadius:[2, 2, 0, 0]
      },
      barWidth: 9,
      emphasis: {
        focus: 'series'
      },
      data: item.data
    })
  });

  let opt = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '5%',
      top: '7%',
      right: '5%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false,
      },
      data: props.xData

    },
    yAxis: {
      type: 'value',
    },
    series: series,
    color,
  };

  return opt;
})




</script>

<template>
  <div :style="{ width: `${width}`, height: `${height}` }" class="chart-box">
    <chart class="chart" :options="options" />
  </div>
</template>

<style scoped lang="stylus">
.chart-box {
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>